<template>
  <footer class="site-footer">
    <div class="footer-content">
      <!-- 主要内容区 -->
      <div class="footer-main">
        <!-- 公司信息 -->
        <div class="company-info">
          <img src="@/assets/images/logo.png" alt="斑马版权" class="footer-logo" />
          <p class="company-desc">
            斑马版权致力于为创作者提供全方位的版权保护服务，通过专业团队和先进技术，助力原创内容价值实现。
          </p>
          <div class="contact-info">
            <div class="contact-item">
              <i class="el-icon-location"></i>
              <span>北京市海淀区中关村创业大厦</span>
            </div>
            <div class="contact-item">
              <i class="el-icon-phone"></i>
              <span>400-888-1234</span>
            </div>
            <div class="contact-item">
              <i class="el-icon-message"></i>
              <span>support@banma.com</span>
            </div>
          </div>
        </div>

        <!-- 快速链接 -->
        <div class="footer-links">
          <div class="links-column">
            <h3>版权服务</h3>
            <ul>
              <li><a href="/copyright/registration">版权登记</a></li>
              <li><a href="/copyright/market">版权市场</a></li>
              <li><a href="/copyright/consultation">版权咨询</a></li>
              <li><a href="/copyright/protection">版权保护</a></li>
            </ul>
          </div>
          <div class="links-column">
            <h3>关于我们</h3>
            <ul>
              <li><a href="/about/company">公司简介</a></li>
              <li><a href="/about/news">新闻中心</a></li>
              <li><a href="/about/join">加入我们</a></li>
              <li><a href="/about/contact">联系方式</a></li>
            </ul>
          </div>
          <div class="links-column">
            <h3>帮助中心</h3>
            <ul>
              <li><a href="/help/guide">使用指南</a></li>
              <li><a href="/help/faq">常见问题</a></li>
              <li><a href="/help/feedback">意见反馈</a></li>
              <li><a href="/help/privacy">隐私政策</a></li>
            </ul>
          </div>
        </div>

        <!-- 关注我们 -->
        <div class="follow-us">
          <h3>关注我们</h3>
          <div class="qrcode-container">
            <div class="qrcode-item">
              <img :src="$global.foot.qrcodewx" alt="微信公众号" class="qrcode" />
              <p>微信公众号</p>
            </div>
            <div class="qrcode-item">
              <img :src="$global.foot.qrcode" alt="APP下载" class="qrcode" />
              <p>APP下载</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <div class="footer-bottom">
        <div class="copyright">
          <p>© {{ currentYear }} 斑马版权 All Rights Reserved.</p>
          <p>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
              京ICP备XXXXXXXX号
            </a>
          </p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'Footer',
  
  setup() {
    const currentYear = computed(() => new Date().getFullYear())
    
    return {
      currentYear
    }
  }
})
</script>

<style lang="scss" scoped>
.site-footer {
  background: linear-gradient(to right, #2c3e50, #34495e);
  color: #fff;
  padding: 60px 0 0 0;
  
  .footer-content {
    width: $container-width;
    margin: 0 auto;
    
    @media screen and (max-width: 1200px) {
      width: 90%;
    }
  }
  
  .footer-main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 40px;
    gap: 30px;
    
    @media screen and (max-width: 992px) {
      flex-direction: column;
      gap: 40px;
    }
  }
  
  .company-info {
    width: 35%;
    
    @media screen and (max-width: 992px) {
      width: 100%;
    }
    
    .footer-logo {
      height: 40px;
      margin-bottom: 20px;
      filter: brightness(0) invert(1);
    }
    
    .company-desc {
      color: #c5c5c5;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    
    .contact-info {
      margin-top: 20px;
      
      .contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        
        i {
          color: $primary-color;
          margin-right: 10px;
          font-size: 18px;
        }
        
        span {
          color: #c5c5c5;
          font-size: 14px;
        }
      }
    }
  }
  
  .footer-links {
    display: flex;
    width: 40%;
    justify-content: space-between;
    
    @media screen and (max-width: 992px) {
      width: 100%;
    }
    
    @media screen and (max-width: 576px) {
      flex-direction: column;
      gap: 30px;
    }
    
    .links-column {
      h3 {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 0;
          width: 30px;
          height: 2px;
          background-color: $primary-color;
        }
      }
      
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        
        li {
          margin-bottom: 12px;
          
          a {
            color: #c5c5c5;
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            display: inline-block;
            
            &:hover {
              color: $primary-color;
              transform: translateX(5px);
            }
          }
        }
      }
    }
  }
  
  .follow-us {
    width: 20%;
    
    @media screen and (max-width: 992px) {
      width: 100%;
    }
    
    h3 {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: $primary-color;
      }
    }
    
    .qrcode-container {
      display: flex;
      gap: 20px;
      
      @media screen and (max-width: 992px) {
        justify-content: flex-start;
      }
      
      .qrcode-item {
        text-align: center;
        
        .qrcode {
          width: 100px;
          height: 100px;
          background: #fff;
          padding: 5px;
          border-radius: 5px;
          margin-bottom: 10px;
        }
        
        p {
          color: #c5c5c5;
          font-size: 12px;
        }
      }
    }
  }
  
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    
    .copyright {
      text-align: center;
      
      p {
        color: #999;
        font-size: 13px;
        margin: 5px 0;
        
        a {
          color: #999;
          text-decoration: none;
          
          &:hover {
            color: $primary-color;
          }
        }
      }
    }
  }
  
  @media screen and (max-width: 768px) {
    padding: 40px 0 0 0;
    
    .footer-main {
      padding-bottom: 30px;
    }
    
    .company-info {
      .footer-logo {
        height: 40px;
      }
    }
    
    .footer-links {
      .links-column {
        h3 {
          font-size: 16px;
          margin-bottom: 15px;
        }
      }
    }
    
    .follow-us {
      h3 {
        font-size: 16px;
        margin-bottom: 15px;
      }
      
      .qrcode-container {
        .qrcode-item {
          .qrcode {
            width: 80px;
            height: 80px;
          }
        }
      }
    }
  }
}
</style>
  